Skip to content

Redesign Key Features section with Split Narrative layout#3

Draft
Copilot wants to merge 3 commits intomainfrom
copilot/redesign-key-features-section
Draft

Redesign Key Features section with Split Narrative layout#3
Copilot wants to merge 3 commits intomainfrom
copilot/redesign-key-features-section

Conversation

Copy link
Copy Markdown
Contributor

Copilot AI commented Nov 9, 2025 •
edited
Loading

The Key Features section lacked visual hierarchy and used technical copy instead of value-focused messaging. Implemented a Split Narrative layout pattern with alternating left-right sections, updated copy, and added visual polish.

Changes

Layout Structure

Split Narrative pattern with 4 full-width alternating rows:

  • Row 1: Content left (StyloMetric DNA) + Visual right
  • Row 2: Visual left + Content right (Hybrid ML Architecture)
  • Row 3: Content left (Explainable AI) + Visual right
  • Row 4: Visual left + Content right (Real-Time Accuracy)

Each feature occupies a full-width section with 50-50 content/visual split on desktop, creating strong page rhythm and natural storytelling flow.

Copy Updates

All descriptions rewritten for product value vs. technical details:

// Before
<p>Combines 1D-CNN pattern recognition with Random Forest explainability...</p>

// After  
<p>Fuses neural networks with linguistic intelligence for real-time, interpretable results.</p>

Visual Enhancements

  • Alternating left-right layout for dynamic visual rhythm
  • Gradient visual placeholders with shimmer animation effects
  • Large decorative icons in visual areas
  • Directional slide-in animations (fadeInLeft/fadeInRight)
  • Staggered timing (0.1s, 0.3s, 0.5s, 0.7s delays)
  • Hover effects: icon rotation, scale, and enhanced shadows
  • Responsive breakpoints at 768px and 480px

Responsive Design

  • Desktop: Side-by-side 2-column grid (50-50 split)
  • Mobile: Vertical stack with visual → content ordering
  • Tablet: Adaptive sizing with centered text

Screenshots

Desktop - Split Narrative Pattern

Mobile - Vertical Stack

Design Benefits

The Split Narrative pattern provides:

  • Strong Page Rhythm: Alternating creates visual interest and guides the eye

  • Individual Feature Focus: Each feature gets dedicated full-width space

  • Storytelling Flow: Natural left-right reading pattern

  • Animation-Friendly: Perfect for directional slide-in effects

  • Modern Editorial Feel: Curated magazine-style layout

  • Fixes Redesign "Key Features" Section for Professional Layout and Copy #2

Original prompt

This section details on the original issue you should resolve

<issue_title>Redesign "Key Features" Section for Professional Layout and Copy</issue_title>
<issue_description>

The current “Key Features” section looks flat and lacks hierarchy, consistency, and marketing appeal. Each card reads like a technical note rather than a product highlight. To improve credibility and design quality, we need a full structural and copy refresh.

Problems

  • No visual or logical hierarchy — all features look equal in importance.
  • Inconsistent icon style and poor color balance.
  • Copy reads as academic explanations instead of concise product value.
  • No single “hero” feature to anchor user attention.

Proposed Solution

Redesign the section with a clear hierarchy and product-driven tone.

Structure

  • 1 Hero Feature (centered): Hybrid ML Architecture — highlight the core technology.
  • 3 Supporting Features (columns): StyloMetric DNA, Explainable AI, Real-Time Accuracy.

Tone

  • Rewrite copy to focus on value and trust rather than internal mechanics.
  • Add measurable results and human-readable explanations.

Visual Design

  • Unified icon set and typography.
  • Light gradient or neutral background to separate from other sections.
  • Subtle hover and fade-in animations for interactivity.

Deliverables

  • Updated content copy (provided below)
  • New layout wireframe or component implementation in Figma/React
  • Visual assets (icons + accent colors)

Reference Copy (for implementation)

  • Hybrid ML Architecture — Fuses neural networks with linguistic intelligence for real-time, interpretable results.
  • StyloMetric DNA — Maps sentence rhythm and lexical depth to identify unique writing patterns.
  • Explainable AI — Provides measurable metrics for every prediction, ensuring transparency.
  • Real-Time Accuracy — 97%+ verified precision, <100 ms latency, CPU-only runtime.
    </issue_description>

Comments on the Issue (you are @copilot in this section)

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

@haoqi-shen
Redesign Key Features section with hierarchical layout and updated copy
2ede70f 
Co-authored-by: haoqi-shen <145812960+haoqi-shen@users.noreply.github.com>
@haoqi-shen
Copy link
Copy Markdown
Owner

haoqi-shen commented Nov 9, 2025

@copilot 试试改改模式，Split Narrative 模式（左右交错）

适用场景：希望展示技术与应用并重。

每个模块占据一整行，左右交错排版：左图右文 / 右图左文。

[🧬 StyloMetric DNA] [illustration]
[illustration] [🤖 Hybrid ML Architecture]
[🔍 Explainable AI] [illustration]
[🚀 Real-Time Accuracy] [illustration]

效果：

页面节奏感强。

每个特性像一个 mini-section，有自己的气场。

非常适合加轻动画（左右滑入、淡入）。

Copilot AI changed the title [WIP] Redesign key features section for professional layout Redesign Key Features section with hierarchical layout Nov 9, 2025
Copilot AI requested a review from haoqi-shen November 9, 2025 09:29
@haoqi-shen
Implement Split Narrative layout pattern with alternating left-right …
3d667bf 
…sections

Co-authored-by: haoqi-shen <145812960+haoqi-shen@users.noreply.github.com>
Copy link
Copy Markdown
Contributor Author

Copilot AI commented Nov 9, 2025

@copilot 试试改改模式，Split Narrative 模式（左右交错）

适用场景：希望展示技术与应用并重。
...

Implemented the Split Narrative pattern with alternating left-right layout. Each feature now occupies a full-width row with 50-50 content/visual split, creating strong page rhythm and natural storytelling flow.

Changes (commit 3d667bf):

  • 4 full-width rows alternating between left content/right visual and right content/left visual
  • Directional slide-in animations (fadeInLeft/fadeInRight)
  • Gradient visual placeholders with shimmer effects
  • Responsive: 2-column on desktop, stacks vertically on mobile

Desktop View:
Split Narrative Desktop

Mobile View:
Split Narrative Mobile

Copilot AI changed the title Redesign Key Features section with hierarchical layout Redesign Key Features section with Split Narrative layout Nov 9, 2025
@haoqi-shen
Copy link
Copy Markdown
Owner

haoqi-shen commented Nov 9, 2025

key feature不能这么占地方，要做在一页内

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@haoqi-shen haoqi-shen Awaiting requested review from haoqi-shen

Assignees

@haoqi-shen haoqi-shen

Copilot code review Copilot

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Redesign "Key Features" Section for Professional Layout and Copy

2 participants

@haoqi-shen